window.onload = function () {
    banner();
    tabmenu();
}

function banner() {
    var oPlay = document.getElementById('play');
    var aLi = oPlay.getElementsByTagName('li');
    var oButton = document.getElementById('button');
    var aDiv = oButton.getElementsByTagName('div');
    var oPrev = document.getElementById('prev');
    var oNext = document.getElementById('next');
    var oFlash = document.getElementById('flash');
    var now = 0;
    var timer2 = null;
    for (var i = 0; i < aDiv.length; i++) {
        aDiv[i].index = i;
        aDiv[i].onmouseover = function () {
            if (now == this.index) return;
            now = this.index;
            tab();
        }
    }
    oPrev.onclick = function () {
        now--;
        if (now == -1) {
            now = aDiv.length - 1;
        }
        tab();
    }
    oNext.onclick = function () {
        now++;
        if (now == aDiv.length) {
            now = 0;
        }
        tab();
    }
    oFlash.onmouseover = function () {
        clearInterval(timer2);
    }
    oFlash.onmouseout = function () {
        timer2 = setInterval(oNext.onclick, 4000);
    }
    timer2 = setInterval(oNext.onclick, 5000);

    function tab() {
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].style.display = 'none';
        }
        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].style.background = "#DDDDDD";
        }
        aDiv[now].style.background = '#A10000';
        aLi[now].style.display = 'block';
        aLi[now].style.opacity = 0;
        aLi[now].style.filter = "alpha(opacity=0)";
        jianbian(aLi[now]);
    }

    function jianbian(obj) {
        var alpha = 0;
        clearInterval(timer);
        var timer = setInterval(function () {
            alpha++;
            obj.style.opacity = alpha / 100;
            obj.style.filter = "alpha(opacity=" + alpha + ")";
            if (alpha == 100) {
                clearInterval(timer);
            }
        }, 10);
    }
}

function tabmenu() {
    var oUl1 = document.getElementById("ul1");
    var aLi = oUl1.getElementsByTagName("li");
    var oDiv = document.getElementById("tab-list");
    var aDiv = oDiv.getElementsByTagName("div");
    for(var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].onmouseover = function() {
            for(var i = 0; i < aLi.length; i++) {
                aLi[i].className = "";
            }
            this.className = "active";
            for(var j = 0; j < aDiv.length; j++) {
                aDiv[j].className = "hide";
            }
            aDiv[this.index].className = "show";
        }
    }
}